<template>
  <div>
    <span>全选:</span>
    <input v-model="isAll" type="checkbox"/>
    <button @click="rev">反选</button>
    <ul>
      <li v-for="(item,index) in arr" :key="index">
        <input v-model="item.c" type="checkbox"/>
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>

// 目标1: 小选框影响全选框
// 1.1 v-for 循环渲染数据, 同时将数据中的c属性和checkbox 进行双向绑定
// 1.2 定义计算属性 isAll, 用全选复选框和 isAll 进行双向绑定
// 1.3 计算属性中, 使用every 进行状态统计, 必须全部 勾选才返回,只要有一个没有勾选就返回 false

// 目标2: 全选框影响小选框
// 2.1 将 isAll改写成完整写法,在 set中获取全选框最新的状态
// 2.2 将最新的状态设置给所有小选框绑定的 c 即可(forEach 遍历)

// 目标3: 反选按钮
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
   computed: {
  // isAll(){// isAll已经和全选按钮双向绑定了, 所以但当 isAll为true时 全选按钮也为true
  //    遍历所有数据的c状态
  //   // 如果全部是 true, 就返回true
  //   // 只要有一个为false 就返回的是false 
  //    return  this.arr.every(item=> item.c)
  // } 
    // 完整写法
    isAll:{
      set(val){
        this.arr.forEach(item => item.c=val );
      },
      get(){
        return  this.arr.every(item=> item.c) 
      }
    } 
    
   },
   methods: {
      rev(){
         this.arr.forEach(item=>item.c=!item.c)  
      }
   },
};
</script>